import React from 'react'
import {ProCard,ProFormSelect,ProFormText,ProFormTextArea,StepsForm,ProFormRadio,ModalForm,} from '@ant-design/pro-components';
import { Divider, Table,TableColumnsType, TableProps,Card, message,Input,  Button, Space,Form  } from 'antd';
import type {PaperInformation,DataType,TableRowSelection} from '../CreatePaper'
import type {addcreateType,SelectquestionType} from '../../../../services/type'

type Props = {
  formRef:any
  setPaperinformation:(vel:PaperInformation | null) => void
  paperinformation:PaperInformation | null
  newlist:string[]
  cahngediscipline:(vel:string)=>void
  querys:addcreateType  | null
  setQuerys:(vel:addcreateType  | null)=>void
  type:any
  setType:React.Dispatch<React.SetStateAction<"选题组卷" | "随机组卷">>
  selectedRows:DataType[]
  setSelectedRows:(vel:DataType[])=>void
  selectedRowKeys:React.Key[]
  setSelectedRowKeys:(vel:React.Key[])=>void
  waitTime:(vel:number)=>void
  rowSelection:TableRowSelection<DataType>
  columns:TableColumnsType<DataType>
  dataSource:DataType[]
  total:number
  setTotal:(vel:number) => void
  randomlist:SelectquestionType[]
}


const StepTwo = ({formRef,setPaperinformation,paperinformation,newlist,cahngediscipline,querys,setQuerys,type,setType,
  selectedRows,setSelectedRows,selectedRowKeys,setSelectedRowKeys,waitTime,rowSelection,columns,dataSource,total,setTotal,randomlist
}:Props) => {
  return (
    <div>
      <StepsForm.StepForm<{
            checkbox: string;
          }>
            name="checkbox"
            title="选择组卷方式&科目"
            onFinish={async () => {
              console.log(formRef.current?.getFieldsValue());
              setPaperinformation({...paperinformation,way:formRef.current?.getFieldsValue().way})
              return true;
            }}
          >
            <ProFormSelect
              name="select"
              label="科目"
              options={newlist}
              placeholder="请选择科目"
              rules={[{ required: true, message: '请选择科目' }]}
              onChange={(e:string) =>{console.log(e),cahngediscipline(e), setPaperinformation({...paperinformation,classify:e}),setQuerys({...querys!,classify:e})}}
            />
              <ProFormRadio.Group
                name="way"
                label="组卷方式"
                style={{
                  margin: 16,
                }}
                radioType="button"
                fieldProps={{
                  value: type,
                  onChange: (e) => {setType(e.target.value),console.log(e.target.value)},
                }}
                options={[
                  {value: '选题组卷', label:'选题组卷'},
                  {value: '随机组卷', label:'随机组卷'},
                ]}
              />
            <div>
              {
                type === '选题组卷'?
                <ModalForm<{
                  name: string;
                  company: string;
                }>
                  trigger={<Button type="primary">选题组卷</Button>}
                  // form={form}
                  autoFocusFirstInput
                  modalProps={{
                    destroyOnClose: true,
                    onCancel: () => {
                      setSelectedRowKeys([]);
                      setSelectedRows([]);
                    }
                  }}
                  submitTimeout={2000}
                  onFinish={async () => {
                    waitTime(500);
                    setPaperinformation({
                      ...paperinformation,
                      children: selectedRows.map(row => ({
                        _id: row.key,
                        question: row.question,
                        type: row.type,
                        answer: row.answer
                      }))
                    });
                    console.log(type,selectedRows)
                    setQuerys({
                      ...querys!,
                      questions:selectedRows.map(vel=>vel.key)
                    })
                    return true;
                  }}
                >
                  <div>
                    <h2>试题列表</h2>
                    <Divider />
                    <Table<DataType>
                      rowSelection={{
                        type: 'checkbox',
                        ...rowSelection
                      }}
                      columns={columns}
                      dataSource={dataSource}
                    />
                  </div>
                </ModalForm>
                :<div style={{marginBottom:"20px"}}>试题数量：
                  <Space.Compact style={{ width: '35%' }}>
                    <Input value={total} onChange={(e)=>{console.log(e.target.value),setTotal(Number(e.target.value))}}/>
                    <Button type="primary" onClick={()=>{setPaperinformation({
                      ...paperinformation,children:randomlist
                    })}}>确定</Button>
                  </Space.Compact>
                </div>
              }
            </div>
          </StepsForm.StepForm>
    </div>
  )
}

export default StepTwo